<template>
    <el-dialog
        :title="title"
        custom-class="el-dialog-600"
        :visible.sync="visible"
    >
        <el-form
            :model="form"
            :rules="rules"
            :ref="formRef"
            label-width="80px"
            :size="$formSize"
        >
            <el-form-item label="内容" prop="content">
                <new-emojis ref="addComent" v-model="form.content"></new-emojis>
                <!-- <el-col :span="20">
                    <comment-editor
                        ref="addComent"
                        v-model="form.content"
                    ></comment-editor>
                </el-col> -->
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false">
                取 消
            </el-button>
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { talk as Api } from "api";

export default {
    props: {
        id: {
            type: [Number, String],
        },
    },
    data() {
        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            title: "", // 标题

            // 表单
            formRef: "formRef", // ref

            form: {
                content: "", // 内容
                comment_level: 1, // 评论级别
            },

            rules: {
                content: {
                    required: true,
                    message: "请输入留言/回复内容",
                    trigger: "change",
                },
            },
        };
    },
    methods: {
        init() {
            this.title = this.id ? "回复留言" : "新增留言";
            this.form.comment_level = this.id ? 2 : 1;
        },

        async onSubmit() {
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    // 禁止按钮
                    this.loading = true;
                }
            });

            if (this.loading) {
                let api = Api.add;
                let params = {
                    content: this.form.content,
                    comment_level: this.form.comment_level,
                };

                if (this.id) {
                    params.id = this.id;
                    api = Api.reply;
                }

                const { code, msg, data } = await this.$axios.post(api, params);

                if (code === 200) {
                    this.$msg.success(msg);
                    this.$parent.getList();

                    this.visible = false;
                } else {
                    this.$msg.warning(msg ? msg : data);
                }

                this.loading = false;
            }
        },
        initReset() {
            this.$refs[this.formRef].resetFields();
            this.$refs.addComent.content = "";
            this.$refs.addComent.isShowEmojiPanel = false;
        },
    },
    watch: {
        // 监听弹窗开关状态来控制组件的初始化
        visible(status) {
            status ? this.init() : this.initReset();
        },
    },
};
</script>